import React, { Component } from "react";
// 受控组件和非受控组件都是指表单组件

// 受控组件就是在input里面使用了value属性和onChange事件
// 受控组件就是让我们自己来控制表单组件内容的组件

// 官方推荐我们使用受控组件, file的时候使用非受控

class App extends Component {
  state = {
    textValue: "a",
  };

  handleChange(e) {
    this.setState({
      textValue: e.target.value,
    });
  }

  handleClick() {
    console.log(this.state.textValue);
  }

  render() {
    return (
      <>
        <h3>受控组件</h3>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange.bind(this)}
        />
        <button onClick={this.handleClick.bind(this)}>btn</button>
      </>
    );
  }
}

export default App;
